import React, { Component } from 'react';
import styles from './index.less';
import Temperature from '@/assets/Temperature.svg'; //Humidity
import Humidity from '@/assets/Humidity.svg';
import WindSpeed from '@/assets/WindSpeed.svg';
import AirConditioner from '@/assets/AirConditioner.svg';
import Light from '@/assets/Light.svg';
import Energy from '@/assets/Energy.svg';
class Floor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps?.data && nextProps.data?.temperature) {
      this.setState({
        info: nextProps.data,
      });
    }
  }
  render() {
    const { info } = this.state;
    return (
      <div className={styles.envFloor}>
        <div className={styles.temperature}>
          <img src={Temperature} />
          <div className={styles._right}>
            <div className={styles.title}>实时温度</div>
            <div className={styles.num}>{info.temperature || '--'}</div>
          </div>
        </div>
        <div className={styles.temperatureLine}></div>
        <div className={styles.humidity}>
          <img src={Humidity} />
          <div className={styles._right}>
            <div className={styles.title}>实时湿度</div>
            <div className={styles.num}>{info.humidity || '--'}</div>
          </div>
        </div>
        <div className={styles.humidityLine}></div>
        <div className={styles.speed}>
          <img src={WindSpeed} />
          <div className={styles._right}>
            <div className={styles.title}>当前风速</div>
            <div className={styles.num}>{info.wind_speed || '--'}</div>
          </div>
        </div>
        <div className={styles.speedLine}></div>
        <div className={styles.conditioner}>
          <img src={AirConditioner} />
          <div className={styles._right}>
            <div className={styles.title}>空调总用电</div>
            <div className={styles.num}>{info.air_condition_power || '--'}</div>
          </div>
        </div>
        <div className={styles.conditionerLine}></div>
        <div className={styles.lighting}>
          <img src={Light} />
          <div className={styles._right}>
            <div className={styles.title}>照明总用电</div>
            <div className={styles.num}>{info.lighting_power || '--'}</div>
          </div>
        </div>
        <div className={styles.lightingLine}></div>
        <div className={styles.totalPower}>
          <img src={Energy} />
          <div className={styles._right}>
            <div className={styles.title}>总用电量</div>
            <div className={styles.num}>{info.power_total || '--'}</div>
          </div>
        </div>
        <div className={styles.totalPowerLine}></div>
      </div>
    );
  }
}
export default Floor;
